<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>content</title>
	<link rel="stylesheet" type="text/css" href="bootstrap.css">
	<style type="">
		*{margin: 0;padding: 0;}
		li{list-style: none;}
		a{text-decoration: none;}
		body{
			font-size: 14px;
			background-color: #ddd;
			line-height: normal;
		}
		ul{margin-bottom: 0;}
		.top{
			background-color: #f26e2c;
		}
		.content{
			width: 1000px;
			margin: 0 auto;
		}
		.list >img{
			display: block;
			height: 50px;
			width: 240px;
			float: left;
			margin-right: 60px;
		}
		.list-1{
			float: left;
			width: 700px;
		}
		.list-1 li{
			float: left;
		}
		.list-1 li a{
			display: block;
			text-decoration: none;
			font-weight: bold;
			color: #fff;
			padding: 16px 15px;
			transition: all .5s;
		}
		.list-1 li a:hover{
			color: #f26e2c;
			background-color: #fff;
		}
		.about{position: relative;}
		.about-1{
			position: absolute;
			background-color: #f26e2c;
			top: 50px;
			left: 0;
			display: none;
		}
		.about:hover .about-1{
			display: block;
		}
		.person{
			margin-top: 20px;
		}
		.person-left{
			float: left;
		}
		.person-1 li{
			width: 120px;
			height: 40px;
		}
		.person-1 li a{
			display: block;
			text-decoration: none;
			color: #fff;
			font-weight: bold;
			padding: 11px 32px;
			background-color: #f26e2c;
			transition: all .5s;
		}
		.person-1 li:hover a{
			color: #f26e2c;
			background-color: #fff;
		}
		.person-left .focus a{
			color: #f26e2c;
			background-color: #fff;
		}
		.person-right{
			float: left;
			margin-left: 20px;
		}
		.person-right >img{
			width: 800px;
			height: 400px;
		}
		.person-right p{
			font-size: 20px;
			font-weight: bold;
			text-align: center;
		}
		#menu li{
			float: left;
		}
		#menu li a{
			display: block;
			text-decoration: none;
			color: #fff;
			font-weight: bold;
			padding: 11px 32px;
			background-color: #f26e2c;
			transition: all .5s;
		}
		#menu li:hover a{
			color: #f26e2c;
			background-color: #fff;
		}
		#menu .focus2{
			color: #f26e2c;
			background-color: #fff;
		}
		.content2{
			margin: 20px auto;
			width: 800px;
			/*border: 2px solid #f26e2c;*/
		}
		.content2 h4{
			margin-top: 20px;
			text-align: center;
		}
		.content2 p{
			text-indent: 28px;
			font-weight: bold;
			line-height: 30px;
			margin-bottom: 20px;
			margin-left: 20px;
			margin-right: 20px;
		}
	</style>
</head>
<body>
	<div class="top">
		<div class="list content">
			<img src="images/logo3.png">
			<ul class="list-1">
				<li><a href="http://127.0.0.1:8080">网站首页</a></li>
				<li><a href="">美食菜谱</a></li>
				<li class="about">
					<a href="">关于我们</a>
					<ul class="about-1">
						<li><a href="">联系我们</a></li>
						<li><a href="">用户反馈</a></li>
					</ul>
				</li>
			</ul>
		</div>
		<div style="clear:both"></div>
	</div>
	<div class="content">
		<div class="content2">
			<h4><%= data.name %></h4>
			<p>
				制作过程：
				<%= data.content %>
			</p>
			<p>
				所用食材：
				<%= data.shicai %>
			</p>
		</div>
	</div>
</body>
</html>
